<template><!--提币管理-->
  <div class="allBox">
    <div class="webPageTitle">充提币记录</div>

    <div class="leftTitle">
      <div class="dataTitle">充提币列表</div>
      <div style="float: right;"  class="myFromBox" >
        <DatePicker  @on-clear="clearTime()"  type="datetimerange"  format="yyyy年MM月dd日"
                     placement="bottom-end" placeholder="请选择日期" v-model="searchTime"  @on-ok="clickTime()"
                     style="width: 240px"></DatePicker>
        <Button slot="append" icon="ios-search" @click="selectList(1)"></Button>
      </div>
      <div style="float: right;"  class="myFromBox" >
        <Input v-model="selectCoinType"  placeholder="请输入币种"/>
      </div>
      <div style="float: right;"  class="myFromBox" >
        <Input v-model="selectUserName"  placeholder="请输入用户名"/>
      </div>
      <div style="float: right;"  class="myFromBox" >
        <Select v-model="selectType"  style="width:150px" placeholder="全部">
          <Option value="" >全部</Option>
          <Option value="2">提币</Option>
          <Option value="1">充币</Option>
          <Option value="3">转币</Option>
        </Select>
      </div>
    </div>

    <div style="float: left;width: 100%;">
      <Table highlight-row  :loading="loading"  :columns="tableColumns" :data="tableData" ></Table>
    </div>
    <div  class="pageBox" >
      <span style="float: left">{{sumAmount}}</span>
      <Page :total="total" :page-size="rows" show-total @on-change="selectList" class="pageStyle"></Page>
    </div>
    <!--读取API错误-->
    <div style="z-index: 10000">
      <Modal v-model="redAPIModal" width="360"  id="iviw-modal">
        <p slot="header" style="color:#f60;text-align:left">
          <Icon type="information-circled"></Icon>
          <span>{{redAPIModalTit}}</span>
        </p>
        <div style="text-align:left">
          <p>错误信息：</p>
          <p>{{redAPIModalCen}}</p>
        </div>
        <div slot="footer">
          <Button type="error" size="large" long  @click="redAPIModalFun">确定</Button>
        </div>
      </Modal>

    </div>
  </div>
</template>

<script>
  export default {
    data(){
      return{
        tableColumns:[
          {title:'序号',type: 'index1', width: 60, align: 'center',render: (h, params) => {
              return h('span', params.index + (this.showPage- 1) * this.rows + 1);
            }},
          {title:'用户名',key:'userName',align:'center'},
          {title:'币种',key:'coinType',align:'center'},
          {title:'操作类型',key:'opType',align:'center'},
          {title:'地址',key:'address',align:'center',width:250},
          {title:'数量',key:'value',align:'center'},
          {title:'手续费',key:'fee',align:'center'},
          {title:'状态',align:'center',
            render : (h,params) => {
              return h('div', [
                h('div', {
                  style:{
                    "color" : params.row.status==0?'gray':params.row.status==1?'green':'red',
                    'font-size': 'initial'
                  },
                }, params.row.statusString),
              ]);
            }},
          {title:'备注',key:'remark',align:'center'},
          {title:'创建时间',key:'createTm',align:'center',width:180}
         ],
        tableData:[],
        redAPIModal:false,
        redAPIModalTit:'',
        redAPIModalCen:'',
        rows:0,
        showPage:'',
        loading:true,                                              //表单数据加载时
        total:0,
        selectCoinType:'',
        selectUserName:'',
        selectType:'',
        searchTime : [],
        sumAmount:0
      }
    },
    methods:{

      selectList:function (page) {
        let _self = this;
        _self.showPage = page;
        _self.$http.get(_self.service + '/coin/userCoinRecord',{params:{
          index:page,
          rows:_self.rows,
          coinType:_self.selectCoinType,
          opType : _self.selectType,
          userName : _self.selectUserName,
          startTime:_self.searchTime[0],
          endTime:_self.searchTime[1],
        }}).then(function (res) {
            if(res.data.code == '001'){
              let datas = res.data.result.data;
              for(let i in datas) {

                let dateTM = new Date(datas[i].createTm);
                let tiem = _self.formatDate(dateTM, 'yyyy-MM-dd hh:mm:ss');
                datas[i].createTm = tiem;
                let status = datas[i].status;
                if(status == 0){
                    status = '未审核';
                }else if(status == 1){
                    status = "成功";
                }else if(status == 2){
                    status = '失败';
                }else if(status == 3){
                    status = "驳回";
                }
                datas[i].statusString = status;
                let opType = datas[i].opType;
                if(opType == 1){
                  opType = '充币';
                }else if (opType == 2) {
                  opType = "提币";
                }else {
                  opType = "转币";
                }
                datas[i].opType = opType;

              }
              _self.tableData = datas;
              _self.loading = false;
              _self.total = res.data.result.total;
              _self.sumAmount = res.data.result.subs;
            }else{
              _self.modalFun('读取提币信息',res.data.msg)
            }
        })
      },

      clearTime:function () {
        this.searchTime[0] = '';
        this.searchTime[1] = '';
      },

      /*获取选中日期*/
      clickTime:function () {
        for(let i in this.searchTime){
          let dataTm  = new Date(this.searchTime[i]);
          let time =  this.formatDate(dataTm,'yyyy-MM-dd hh:mm');
          let oldTime = (new Date(time)).getTime();
          this.searchTime[i] = oldTime
        }
        if(this.searchTime[0]  == this.searchTime[1]){
          this.searchTime[1] = this.searchTime[1]+86400000
        }else{
          this.searchTime[1] = this.searchTime[1] + (86400000-1)
        }
        this.selectList(1);
      },
      /**
       * 报错提示信息
       *
       * @param {string} modTit  定义错误标题
       * @param {string} modCen  定义错误内容
       *
       * @return {null}  null
       * */
      modalFun:function (modTit,modCen) {
        this.redAPIModal = true;
        this.redAPIModalTit = modTit;
        this.redAPIModalCen = modCen;
      },
      redAPIModalFun:function () {
        this.redAPIModal = false
      },

      /**
       *获取浏览器高度对 table的 row 显示进行数量控制
       * */
      tableRowH:function(){
        let _self = this;
        let winHeight = document.documentElement.clientHeight;
        _self.rows = Math.floor((winHeight - (40+50+50+100))/48)-1;
      }
    },
    created:function () {
      this.tableRowH();
      this.selectList(1)
    }


  }
</script>
<style scoped>
  .pageBox{
    float: left;
    width: 100%;
    margin-top: 10px
  }
  .pageStyle{
    float: right;
    margin-right: 20px;
    margin-bottom: 10px;
  }
  .imgBoxImg{
    position: relative;
    width: 100%;
    height:  180px;
    border: 1px dashed  #999 ;
    border-radius: 5px;
  }
  .imgBoxImg:hover{
    border: 1px dashed green;
    border-radius: 5px;

  }
  .imgBoxImg img{
    width: 100%;
    height: 100%;
  }
  .uploadBox{
    width: 100%;
    height:  100%;
    position: absolute;
    overflow: hidden;
    filter: alpha(opacity=0);
    -moz-opacity: 0;
    opacity: 0;
    z-index: 1000;
  }
</style>
